<!-- 物料清单查询页面 -->
<template>
  <div class="header">
    <div class="el-menu">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="1">物料清单查询</el-menu-item>

      </el-menu>
    </div>
    <search
      @search-params-btn-emits="searchParamsBtnEmits"
      @reset-params-btn-emits="resetParamsBtnEmits"
    />
  </div>

  <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{ textAlign: 'center' }"
    :cell-style="{ textAlign: 'center' }"
    height="70vh"
  >
    <el-table-column label="大类描述" prop="divisionDesc" > </el-table-column>
    <el-table-column label="中类描述" prop="groupDesc" > </el-table-column>
    <el-table-column label="小类描述" prop="classDesc" > </el-table-column>
    <el-table-column label="物料编码" prop="materialCode" > </el-table-column>
    <el-table-column label="物料描述" prop="materialDesc" > </el-table-column>
    <el-table-column label="区域" prop="area" > </el-table-column>
    <el-table-column label="分级" prop="grade" > </el-table-column>
    <el-table-column label="工程类别" prop="engineeringClass" > </el-table-column>
    <el-table-column label="备注" prop="remark"> </el-table-column>




  </el-table>
  <el-pagination
    style="margin-top: 20px"
    v-model:current-page="apiStore.page.pagenum"
    v-model:page-size="apiStore.page.size"
    background
    layout="total, prev,sizes, pager, next"
    :total="apiStore.page.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <Dialog ref="dialogRef"></Dialog>
</template>

<script lang="ts" setup>
import useGoodsStore from '@/store/goods/index.js'
import { useRouter } from 'vue-router'
import { ref, watch, reactive } from 'vue'
import Search from '@/views/goods/cpns/search.vue'
import Dialog from '@/views/goods/cpns/dialog.vue'
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const apiStore = useGoodsStore()
// const page = reactive({
//   pagenum: 1,
//   size: 10,
//   total: 40
// })

let tableData = ref([
  // {
  //   big: '一次设备',
  //   name: '避雷器',
  //   small: '交流避雷器',
  //   code: '500004650',
  //   des: ' 交流避雷器,AC10kV,17kV,硅橡胶,45kV,不带间隙',
  //   zone:'全网',
  //   class:'优选清单',
  //   type:'主网',
  //   note:"xx"
  // },
  // {
  //   big: '一次设备',
  //   name: '避雷器',
  //   small: '交流避雷器',
  //   code: '500004650',
  //   des: ' 交流避雷器,AC10kV,17kV,硅橡胶,45kV,不带间隙',
  //   zone:'全网',
  //   class:'优选清单',
  //   type:'主网',
  //   note:"xx"
  // }
])
const dialogRef = ref()
const router = useRouter()

watch(
  () => apiStore.goodsTable,
  (New, Old) => {
    // console.log('New===',New.);
    tableData.value = New.materialListList
    // tableData.value = New.data

    apiStore.page.total = New.total
  },
  { deep: true }
)
//获取仓库列表
const getWarehouse = async () => {
  const res = await apiStore.getMaterialHandler({
    pageNum: apiStore.page.pagenum,
    pageSize: apiStore.page.size
  })
}
getWarehouse()

//删除表格元素
const handleDelete = async (index: number, row: TableData) => {
  await apiStore.delWarehouseHandler(row.id)
  await apiStore.getWarehouseAction()
}
const searchParamsBtnEmits = async (searchParams:any) => {
  const params = {
    pageNum: apiStore.page.pagenum,
    pageSize: apiStore.page.size,
    ...searchParams
  }
  const res = await apiStore.getMaterialHandler()
}
//修改table元素
const handleEdit = (index: number, row: TableData) => {
  dialogRef.value.dialogVisible = true
  //修改
  dialogRef.value.isNewOrUpdate = false
  dialogRef.value.dialogEditInfoBtn(row)
}

//新增table元素
const addBtn = () => {
  dialogRef.value.isNewOrUpdate = true
  dialogRef.value.dialogVisible = true
}

const jumpToGoods = (row) => {
  router.push({ path: '/main/goods', query: { id: row.id, name: row.name } })
}

//size大小切换
const handleSizeChange = () => {
  getWarehouse()
}

//当前页切换
const handleCurrentChange = () => {
  getWarehouse()
  // loginStore.getUserListInfoAction(page.value, size.value)
}
</script>

<style scoped lang="scss">
.el-menu {
  // margin: 20px 0;
  // padding-bottom: 20px;
  margin-bottom: 20px;
  width: 100%;
  .el-menu--horizontal.el-menu {
    border:none
  }
}
</style>
